<template>
	<!-- 产品介绍 -->
	<view>
		<global-navgation  title="产品介绍"></global-navgation>
		<view class="top">
			<image src="../../static/images/57.png" mode=""></image>
			<input v-model="filterText" type="text"  @blur="fun()" @focus="focus()" class="search" placeholder="请输入关键字搜索">
			
			
			</input>
		</view>
		<view class="nav"  >
				<!-- <view class="under1" >
					<view >
						{{name}}
					</view>
				</view>
				<view class="under2"  @click="under2">
					<view >
						{{name2}}
					</view>
				</view>
				<view class="under2" @click="under3">
					<view >
						{{name3}}
					</view>
				</view> -->
				<!-- 头部滑动导航 -->
				<scroll-view scroll-x class="no_scr2" v-show="isshow">
					<view @click="ghfdg()" v-for="(item,index) in lists" class="no_dat2 " :class="item.id == no_da2_index ?'cur':''" @tap="no_da2(item.id)">
							{{item.name}}
					</view>
				</scroll-view>
		</view>
		<view class="lists" >
			<view class="list1" v-for="(v,index) in filterList">
				
				<image :src="v.cover_img"></image>
				<text>{{v.title}}</text>
			</view>
			
		</view>
		
	
	</view>
</template>
<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	export default{
		components:{
			globalNavgation
		},
		data(){
			return{
					isshow:true,
				  btnnum: 0,
				  lists:[],
				  list:[],
					no_da2_index:0,
					filterText:'',
					tokens:''
			}
		},
		computed:{
			filterList () {
				var arr = []
				this.list.forEach((item) => arr.push(item))
				if (this.filterText) {
					arr = this.list.filter(item => item.title.includes(this.filterText))
				}
				return arr
			}
		},
		mounted() {
			// 初始化获取数据
			this.__initClassData()
			this.no_da2()
		},
		onLoad(){
			uni.getStorage({
			    key: 'token',
			    success:  res=> {
					this.tokens=res.data
					console.log('mmm',this.tokens)
			    }
			});
		},
		methods:{
			fun(){
				console.log(1)
				this.isshow=true
			},
			focus(){
				console.log(2)
				this.isshow=false
			},
			no_da2(e){
				
				this.no_da2_index = e,
				this.$api.get({
					url: '/article/article/get_list',
					data:{categoryId:e,token:this.tokens}
				}).then(res => {
				this.list=res.data
				console.log(res)
				
				// console.log(res.data)
					})
				// alert(123)
				
			},
		   change(e) {
		      this.btnnum = e
		      console.log(this.btnnum)
		  },
		  under2(){
			  uni.navigateTo({
			  	url:'../Introduction1/Introduction'
			  })
		  },
		  under3(){
		  			  uni.navigateTo({
		  			  	url:'../Introduction2/Introduction'
		  			  })
		  },
		  __initClassData() {
		  	this.$api.get({
		  		url: '/article/category/get_select',
				data:{token:this.tokens,type:'goods'}
		  	}).then(res => {
			this.lists=res.list
			
			
			// console.log(res.data)
		  		})
		  	},
		},
		
	}
</script>
<style>
	.no_scr2{
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
		height: 110rpx;
		position: relative;
	}
	  .no_scr2::-webkit-scrollbar {
	    display: none;
	  }
	
	
	.no_dat2{
		width: 25%;
		display: inline-block;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}
	
	/deep/::-webkit-scrollbar {
	 display: none;
	 width: 0;
	 height: 0;
	}
		 .cur {
		color: #007AFF;
		position: relative;
	}
	
	 .cur::after {
		content: '';
		position: absolute;
		/* left: 58rpx; */
		left: 50%;
		transform: translate(-50%,0%);
		top: auto;
		bottom: -2rpx;
		right: auto;
		height: 6rpx;
		width: 40rpx;
		background-color: #32b66b;
	}
	 .dis{
	        display: block;
	    }  
	.top{
			width: 100%;
			height: 108rpx;
			background: #F7F7F7;
			position: relative;
		}
		.lists{
			width: 100%;
			height: 436rpx;
			display: flex;
			flex-wrap: wrap;
		}
		.lists .list1{
			width: 340rpx;
			height: 436rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
			border-radius: 16rpx;
			margin-top: 24rpx;
			margin-left: 24rpx;
			position: relative;
		}
		.lists .list1 image{
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 16rpx 16rpx 0 0;
		}
		.lists .list1 text{
			display: block;
			height: 44rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 16px;
			line-height: 18px;
			color: rgba(0, 0, 0, 0.85);
			position: absolute;
			left: 20rpx;
			bottom: 36rpx;
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
			display: block;
			width: 90%;
		}
		.lists .list2 image{
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 16rpx 16rpx 0 0;
		}
		.lists .list2 text{
			display: block;
			height: 44rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 16px;
			line-height: 22px;
			color: rgba(0, 0, 0, 0.85);
			position: absolute;
			left: 20rpx;
			bottom: 36rpx;
		}
		.lists .list2{
			width: 340rpx;
			height: 436rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
			border-radius: 16rpx;
			margin-top: 24rpx;
			margin-left: 22rpx;
			margin-right: 24rpx;
			position: relative;
		}
		
		.top .search {
			width: 686rpx;
			height: 68rpx;
			position: absolute;
			top: 20rpx;
			left: 32rpx;
			background: #FFFFFF;
			border: 1px solid rgba(151, 151, 151, 0.1);
			box-sizing: border-box;
			border-radius: 16rpx;
			background-origin: content-box;
			text-indent: 72rpx;
	/* 		background: url(../../static/images/57.png) no-repeat 36rpx 22rpx;
			background-size: 24rpx 24rpx;
			background-position: left; */
			
		}
		.top image{
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 42rpx;
			left: 68rpx;
			z-index: 2;
		}
		.nav{
			width: 100%;
			height: 92rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
		}
		.nav .under1 {
			width: 33%;
			height: 90rpx;
			background: #FFFFFF;
			line-height: 90rpx;
			border-bottom: 2rpx solid #3965FF;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			font-size: 14px;
			
			text-align: center;
			color: #3965FF;
		}
		
		.nav .under2 {
			width: 33%;
			height: 90rpx;
			background: #FFFFFF;
			line-height: 90rpx;
			border-bottom: 2rpx solid #fff;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			font-size: 14px;
			
			text-align: center;
			color: rgba(0, 0, 0, 0.65);
		}
		
		
		
</style>